<template>
    <has-left-nav-layout>
        <template v-slot:leftNav>
            <div class="left-menu">
            </div>
        </template>
         <div class="leftShopBox">
                <main-wrap :loading="true" ref="mianEle" :load="onLoad" :end="page.finished" :noFixed="true" bodyBg="none" :showOverTxt="page.lists.length>0">
                    <div class="coupons-maxList">
                         <div class="list-coupons-receive">
                            <div class="item" v-for="(item,index) in page.lists" :key="index">
                                <div class="coupons-lq">
                                    <img class="icon" src="/images/c-s.png" />
                                    <div class="num">{{item.couponAmount?.decimalTwoString}}</div>
                                </div>
                                <div class="total">Total Remaining {{item.minAmount?.decimalTwoString}}</div>
                                <div class="date">{{text2}} {{item.validDate}}</div>
                                <div class="btnSave" @click="couponReceive(item)" v-if="item.userReceiveStatus==1"></div>
                                <div class="noSave"  @click="couponCancel(item)"  v-if="item.userReceiveStatus==2"></div>
                            </div>
                        </div>
                        <empty v-if="page.finished && page.lists.length<1"/>
                    </div>
                </main-wrap>
         </div>
    </has-left-nav-layout>
</template>

<script>
import {reactive,toRefs, onMounted,getCurrentInstance,computed } from 'vue'
import { useStore } from 'vuex'
import {useRoute,useRouter} from 'vue-router'
import {Rate as vanRate} from 'vant'
import moment from 'moment'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import oneTab from '@/components/oneTab.vue';
import mySearch from '@/components/mySearch.vue'
import Image from '@/components/image.vue';
import myTab from '@/components/myTab.vue';
import goodsList from '@/components/goodsList.vue';
import sort from '@/components/sort.vue';
import twoTab from '@/components/twoTab.vue'
import Title from '@/components/title.vue';
import myDailog from '@/components/myDailog.vue'
import cutImageGoodsDetail from '@/components/cutImageGoodsDetail.vue'
import empty from '@/components/empty.vue'
import cutBorderBox from '@/components/cutBorderBox.vue' 
import { useI18n } from 'vue-i18n'

export default {
    components:{
        mainWrap,
        oneTab,
        mySearch,
        Image,
        myTab,
        goodsList,
        sort,
        twoTab,
        Title,
        myDailog,
        cutImageGoodsDetail,
        empty,
        cutBorderBox,
        vanRate
    },
    setup(){
        const store = useStore()
        const router = useRouter()
        const route = useRoute()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
             userInfo:computed(()=>store.state.base.userInfo),
            id:'', // 店铺id
            keyword:'',
            details:'',
            goodsCategoryId:'',
            goodsCategorys:[],
            page:{
                lists:[],
                pageIndex:1,
                pageSize:12,
                finished: false
            },
            sortParams:{
                orderField: 1,
                orderType: "desc",
            },
            showFlag:false,
            openShop:false,
            showFlagStore:false,
            total:0,
            couponList:[],
            text1:t('coupons.text1'),
            text2:t('coupons.text2'),
        })

        onMounted(()=>{
           state.id = route.params.id
           onLoad()
        })


        const onLoad = ()=> {
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                setTimeout(async () => {
                    const res = await store.dispatch("shop/get_coupon_receive", {
                        page: state.page.pageIndex,
                        limit: state.page.pageSize,
                        shopId:state.id,
                         walletAddress:state.userInfo.walletAddress
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    state.total = res.total
                    if (state.page.lists.length >= res.total) {
                        state.page.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }


        const resetScroll = async()=>{
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }
        const getSearchData = async(keyword)=>{
            resetScroll()
        } 
        const couponReceive = async(item)=>{
            store.dispatch("shop/couponReceive", {
                    shopCouponId:item.shopCouponId,
                     walletAddress:state.userInfo.walletAddress
             }).then((res)=>{
                    if(res.success){
                        toast('receive success')
                        resetScroll()
                    }else{
                        toast(res.message)
                    }
             })
        } 
         const couponCancel = async(item)=>{
            store.dispatch("shop/couponCancel", {
                    shopCouponId:item.shopCouponId
             }).then((res)=>{
                    if(res.success){
                        toast('cancel success')
                        resetScroll()
                    }else{
                        toast(res.message)
                    }
             })
        } 
        
        
        // const ctgGetData = ctgId=>{
        //     state.goodsCategoryId = ctgId
        // }
        const getSortData = sortParams =>{
            state.sortParams = sortParams
            resetScroll()
        }
         const btnLeftMenu = () =>{
          state.openShop = true
        }
       
        return {
            ...toRefs(state),
            onLoad,
            getSearchData,
            //ctgGetData,
            getSortData,
            btnLeftMenu,
            moment,
            couponReceive,
            couponCancel
        }
    }
}
</script>

<style lang="scss" scoped>
    .leftShopBox{
        box-sizing: border-box;
        display: flex;
        align-self: flex-start;
        align-items: flex-start;
        justify-content: flex-start;
        width:100%;
        overflow-y: auto;
        height:96vh;
    }
      .left-menu{
        width:100px;
        height:100%;
        position: relative;
    }
      .list-coupons-receive{
        display: flex;
        justify-content: flex-start;
        flex-flow: wrap;
        margin-top:60px;
        .item{
            width:350px;
            height:350px;
            margin-right:20px;
            margin-bottom:20px;

            border:1px solid #004AD9;
            text-align: center;
            background-color: #004AD920;
            .coupons-lq{
                    background-image:url('/images/r-coupon.png');
                    background-size:100% 100%;
                    height:120px;
                    width:200px;
                    background-repeat: no-repeat;
                    background-position: center;
                    margin:20px auto 10px auto;
                    text-align: center;
                    padding:10px 0;
                    .icon{
                        width:24px;
                    }
                    .num{
                        font-size:28px;
                        color:#fff;
                    }
             }
             .total{
                 font-size:26px;
                 color:#fff;
                 padding-top:10px;
             }
             .date{
                  font-size:24px;
                  color:#ffffff60;
             }
             .noSave,
             .btnSave{
                background-image:url('/images/coupon/lq.png');
                background-size:100% 100%;
                height:60px;
                width:160px;
                margin:20px auto;
             }
             .noSave{
                   background-image:url('/images/coupon/qx.png');
             }
        }
    }
</style>
